const path = require('path');
//启动热更新第二步 
const webpack = require('webpack');

//引入插件
//作用：1、使用插件之后，不需要手动链接bundle.js文件
//2.使用插件之后，自动引用内存中的html页面
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');


module.exports = { // entry 入口  output 输出
    entry:path.join(__dirname,'./src/main.js'),//需要打包的文件 入口
    output:{
        path:path.join(__dirname,'./dist'),//打包之后 输出到文件夹
        filename:'bundle.js' //打包好之后 生成的文件名
    },
    devServer:{
        open:'chrome',
        // port:3006,
        contentBase:'src',
        hot:true //热更新 【只需要更新，用户更改的内容】，--启动热更新第一步
    },
    plugins:[ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //启动热更新的第三步
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//需要创建的模板路径
            filename:'index.html' //在内存中创建HTML页面
        }),
        new VueLoaderPlugin()
    ], 
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//use 中加载器执行的顺序，右往左执行，先执行css-loader在执行style-loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //limit 限制限定，用于指定图片的大小，[name]表示获取背景图片的名称，[ext]获取背景图片的后缀名，[hash:5]表示设置5为哈希数码
            {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?esModule=false&limit=131663&name=[hash:5]-[name].[ext]'},//处理图片后缀
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)$/,use:'url-loader'},//用于处理字体图标
            //exclude:/node_modules/ 表示排除node_modules文件夹中.js文件
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve:{
        alias:{//修改 vue 导入的文件
            // "vue$":"vue/dist/vue.js"
        }
    }
}